<!DOCTYPE html>
<html>
	<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>派件单</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="../../plugins/font-awesome/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="../../https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="../../dist/css/adminlte.min.css">
  
  <link rel="stylesheet" href="../../dist/css/bootstrap.css">
  <!-- iCheck -->
  <link rel="stylesheet" href="../../plugins/iCheck/flat/blue.css">
  <!-- Morris chart -->
  <link rel="stylesheet" href="../../plugins/morris/morris.css">
  <!-- jvectormap -->
  <link rel="stylesheet" href="../../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
  <!-- Date Picker -->
  <link rel="stylesheet" href="../../plugins/datepicker/datepicker3.css">
  <!-- Daterange picker -->
  <link rel="stylesheet" href="../../plugins/daterangepicker/daterangepicker-bs3.css">
  <!-- bootstrap wysihtml5 - text editor -->
  <link rel="stylesheet" href="../../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
  <!-- Google Font: Source Sans Pro -->
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
  
  <script src="../../plugins/jquery/jquery.min.js"></script>
  
   <script src="../../plugins/jquery/bootstrap.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
  $.widget.bridge('uibutton', $.ui.button)
</script>
<!-- Bootstrap 4 -->
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Morris.js charts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="../../plugins/morris/morris.min.js"></script>
<!-- Sparkline -->
<script src="../../plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="../../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="../../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart -->
<script src="../../plugins/knob/jquery.knob.js"></script>
<!-- daterangepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="../../plugins/daterangepicker/daterangepicker.js"></script>
<!-- datepicker -->
<script src="../../plugins/datepicker/bootstrap-datepicker.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="../../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll -->
<script src="../../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="../../plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="../../dist/js/adminlte.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="../../dist/js/pages/dashboard.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../../dist/js/demo.js"></script>
  
  
  
</head>
	<body>
		<table id="tab"  class="table table-bordered table-striped table-hover">
     <tr align="center">
     	<td>编号</td>
     	<td>派件日期</td>
     	<td>快递员</td>
     	<td>派件编号</td>
     	<td>货物名称</td>
     </tr>
     </table>  
		
		
		 <div align="center">
                <ul id="page" class="pagination pagination-lg m-0 float-right">
                  
                 
                </ul>
              </div>
 
	</body>
	<script>
		/*上一页*/
	 function previous(pageNum,totalPage){
	 	
			if(pageNum<=1){
				pageNum=1;
			}
			$("#page").empty();
			 $("#tab tr:gt(0)").empty();
             $("#tab tr").not(':eq(0)').empty();
             
			$.ajax({
				 type: "post", //请求方式
				 async: true, //是否异步
				 url: "http://localhost:8071/selectdelivery",
				 xhrFields:{withCredent: true},
				 data:{"sid":2,"pageNum":pageNum},
	             crossDomain: true,
				 dataType: "json", //跨域json请求一定是jsonp
				 // jsonp: "callback", //跨域请求的参数名，默认是callback
				 //jsonpCallback:"successCallback",    //自定义跨域参数值，回调函数名也是一样，默认为jQuery自动生成的字符串数
				beforeSend: function() {
					 //请求前的处理
					//alert("请求前")
				},success: function(data) {
							    $("#page").append("<li class='page-item' onclick='previous("+(data.pageNum-1)+","+data.totalPage+")' ><a class='page-link float-left' href='#'>&laquo;</a></li>"); 

					
				 	$.each(data.list, function(i,d){
				 		
		              $("#tab").append("<tr align='center'><td>"+d.deid+"</td><td>"+d.dedate+"</td><td>"+d.staff.name+"</td><td>"+d.sendasingle.sasid+"</td><td>"+d.sendasingle.ordertype+"</td></tr>")
					 });
					 	         $("#page").append("<li class='page-item' onclick='next("+(data.pageNum+1)+","+data.totalPage+")'><a class='page-link float-right' href='#'>&raquo;</a></li>"); 

					 //请求成功处理，和本地回调完全一样
				},		
				 error: function() {
					 //请求出错处理
					
				}
	});
			
	}
	 /*下一页*/
		function next(pageNum,totalPage){
             if(pageNum>=totalPage){
             	pageNum=totalPage;
             }
             $("#page").empty();
             $("#tab tr:gt(0)").empty();
             $("#tab tr").not(':eq(0)').empty();

             $.ajax({
				 type: "post", //请求方式
				 async: true, //是否异步
				 url: "http://localhost:8071/selectdelivery",
				 xhrFields:{withCredent: true},
				 data:{"sid":3,"pageNum":pageNum},
	             crossDomain: true,
				 dataType: "json", //跨域json请求一定是jsonp
				 // jsonp: "callback", //跨域请求的参数名，默认是callback
				 //jsonpCallback:"successCallback",    //自定义跨域参数值，回调函数名也是一样，默认为jQuery自动生成的字符串数
				beforeSend: function() {
					//alert("请求前")
				},success: function(data) {
				  $("#page").append("<li class='page-item' onclick='previous("+(data.pageNum-1)+","+data.totalPage+")' ><a class='page-link float-left' href='#'>&laquo;</a></li>"); 
				 	$.each(data.list, function(i,d){
		              $("#tab").append("<tr align='center'><td>"+d.deid+"</td><td>"+d.dedate+"</td><td>"+d.staff.name+"</td><td>"+d.sendasingle.sasid+"</td><td>"+d.sendasingle.ordertype+"</td></tr>")
					 });
				  $("#page").append("<li class='page-item' onclick='next("+(data.pageNum+1)+","+data.totalPage+")'><a class='page-link float-right' href='#'>&raquo;</a></li>"); 
					 //请求成功处理，和本地回调完全一样
				},		
				 error: function() {
					 //请求出错处理
				}
	});
		}
	 
	 $(function(){
	 	/*查询未入库所有*/
	$.ajax({
				 type: "post", //请求方式
				 async: true, //是否异步
				 url: "http://localhost:8071/selectdelivery",
				 xhrFields:{withCredentials:true},
				 crossDomain:true,/*ajax跨域请求获取cookies和session*/
				 dataType: "json", //跨域json请求一定是jsonp
				 // jsonp: "callback", //跨域请求的参数名，默认是callback
				 //jsonpCallback:"successCallback",    //自定义跨域参数值，回调函数名也是一样，默认为jQuery自动生成的字符串数
				beforeSend: function() {
					 //请求前的处理
					//alert("请求前")
				},success: function(data) {
		    $("#page").append("<li class='page-item' onclick='previous("+(data.pageNum-1)+","+data.totalPage+")' ><a class='page-link float-left' href='#'>&laquo;</a></li>"); 

				 	$.each(data.list, function(i,d) {
		              $("#tab").append("<tr align='center'><td>"+d.deid+"</td><td>"+d.dedate+"</td><td>"+d.staff.name+"</td><td>"+d.sendasingle.sasid+"</td><td>"+d.sendasingle.ordertype+"</td></tr>")
			    });
	         $("#page").append("<li class='page-item' onclick='next("+(data.pageNum+1)+","+data.totalPage+")'><a class='page-link float-right' href='#'>&raquo;</a></li>"); 

					 //请求成功处理，和本地回调完全一样
				},		
				 error: function() {
					 //请求出错处理
					
				}
	});
	 	
	 })
</script>
</html>
